{extend name='public/base' /}

{block name="content"}
<style type="text/css">
    html {
        background-color: #fff !important;
    }
    .center{
        align-items: center;
        text-align: center;
    }
</style>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="form">
            <div style=" width:800px;">
                {if isset($info.id)}
                <input type="hidden" name="id" value="{$info.id}">
                {/if}
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">报修信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">服务单号：{$info.order_sn}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报修类型：{$info.repairType.name}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报修商户：{$info.merchant.name}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报 修 人：{$info.repair_name}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">联系电话：{$info.repair_mobile}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报修时间：{$info.create_time}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">问题描述：{$info.describe}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <div style="display: flex;flex-wrap: wrap;">相关图片：
                        {if $info['images']}
                        {foreach $info['images'] as $v}
                        <img src="{$v}" alt="" style="width: 100px;height: 100px;margin: 0 10px 10px 0;">
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>
            {if condition="$info['status'] > 1"}
            <div style="width: 600px;">
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">维修信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style="line-height: 35px;font-size: 14px;">维修人：{$info.dispose_name}</span>
                    <span style="line-height: 35px;font-size: 14px;">接单时间：{$info.order_time}</span>
                    <span style="line-height: 35px;font-size: 14px;">完工时间：{$info.dispose_time}</span>
                </div>
                <div style="display: flex;justify-content:space-between;width: 396px;">
                    <span style="line-height: 35px;font-size: 14px;">处理结果：{$info.dispose_result}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <div style="display: flex;flex-wrap: wrap;">相关图片：
                        {if $info['dispose_image']}
                        {foreach $info['dispose_image'] as $v}
                        <img src="{$v}" alt="" style="width: 100px;height: 100px;margin: 0 10px 10px 0;">
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>
            {if condition="$info['dispose_material'] != null"}
            <div style="width: 600px;">
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">费用信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style="line-height: 35px;font-size: 14px;">合计：{$info.allMoney}</span>
                    <span style="line-height: 35px;font-size: 14px;">物料费：{$info.materialMoney}</span>
                    <span style="line-height: 35px;font-size: 14px;">工时费：{$info.hourMoney}</span>
                </div>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <td class="center">物料名称</td>
                        <td class="center">数量</td>
                        <td class="center">单价</td>
                        <td class="center">小计</td>
                    </tr>
                    </thead>
                    <tbody class="role_list">
                    {foreach $info['dispose_material'] as $key=>$id}
                    <tr>
                        <td class="center">{$id[1]}</td>
                        <td class="center">{$id[2]}</td>
                        <td class="center">{$id[3]}</td>
                        <td class="center">{$id[4]}</td>
                    </tr>

                    {/foreach}
                    </tbody>

                </table>
            </div>
            {/if}
            {/if}



               
            <div class="layui-form-item" style="margin-top: 10px;">
                <label class="layui-form-label" style="text-align: left !important;padding: 0 !important;width: 80px !important;">结单原因：</label>
                <div class="layui-input-block" style="margin-left: 80px !important;">
                    <textarea placeholder="请输入结单原因" class="layui-textarea" name="statement_reason" autocomplete="off" required lay-verify="required"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-layout-admin " style="width: 100%">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0px;text-align: center;">
                        <button class="layui-btn" lay-submit="confirm" lay-filter="confirm">提交</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="js"} <!--js处理区-->


<script>
    layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable'], function () {
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var opTable = layui.opTable;
        form.render();

        form.on('submit(confirm)', function (data) {
            console.log(data.field)
            lucky.FormSubmit("{:url('backRecord')}", data.field, true);
            return false;
        });
    });

</script>

{/block}
